<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表白发布</title>
		<!-- import CSS -->
		<link rel="stylesheet" href="/static/element-ui/lib/theme-chalk/element.css">
		<!-- import Vue before Element -->
		<script src="/static/js/vue.js"></script>
		<!-- import JavaScript -->
		<script src="/static/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="/static/layui/jquery.min.js"></script>
		<style>
			.divCss {
				width: 95%;
				height:100%;
				/* 边框属性 */
				border: 1px solid #cccccc;
				border-radius: 2px;
				/* 内边距 */
				padding: 10px;
				margin: 0 auto;
				/* 投影 */
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			}
		</style>
	</head>
	<body>
		<div id="div">
			<div class="divCss">
			<el-form ref="wall" :model="wall" label-width="90px">
			   <el-form-item label="表白对象">
			    <el-input  v-model="wall.guser"></el-input>
			  </el-form-item>
			  <el-form-item label="表白时间">
			    <el-input  v-model="wall.wall_time"></el-input>
			  </el-form-item>
			  <el-form-item label="表白短文">
			    <el-input type="textarea" v-model="wall.wall_info"></el-input>
			  </el-form-item>
		  
			  <el-form-item label="表白图片">
			    <el-upload action="#" ref="upload" :auto-upload="false" list-type="picture-card" :on-preview="handlePictureCardPreview"
			     :limit="2" :on-exceed="handleExceed" :on-remove="handleRemove">
			    	<i class="el-icon-plus"></i>
			    </el-upload>
			    <el-dialog :visible.sync="dialogVisible1">
			    	<img width="100%" :src="dialogImageUrl" alt="">
			    </el-dialog>
			  </el-form-item>
  
			  <el-form-item>
				<el-button type="primary" @click="dialogVisible = true ,getDate()">立即创建</el-button>
				<el-dialog
				  title="发布表白"
				  :visible.sync="dialogVisible"
				  width="50%"
				  :before-close="handleClose">	
				  <span >表白对象：{{wall.guser}}</span><br />
				  <span >表白时间：{{wall.wall_time}}</span><br />				 
				  <span >表白短文：{{wall.wall_info}}</span><br />	
				  <span >图片预览：</span><br />
				  <div v-for="file in fileList">
				  	<el-image :src="file.url"></el-image>
				  </div><br />
				  
				  <span slot="footer" class="dialog-footer">
				    <el-button @click="dialogVisible = false">取 消</el-button>
				    <el-button type="primary" @click="submitUpload()">确 定</el-button>
				  </span>
				</el-dialog>
			    <el-button>取消</el-button>
			  </el-form-item>
			  
			  
			  
			</el-form>
		    </div> 
		</div>
		
		<script>
			var app=new Vue({
				el:'#div',
				data:{
					dialogVisible: false,
					dialogVisible1: false,
					wall: {
						suser: '',
						guser: '',
						wall_time: '',					
						wall_info: ''
					          
					},
					dialogImageUrl: '',
					fileList:[],
					disabled: false,
				},
				methods: {
					handleClose(done) {
					        this.$confirm('确认关闭？')
					          .then(_ => {
					            done();
					          })
					          .catch(_ => {});	  
					},
					getDate(){
						var time=new Date();
						var y=time.getFullYear();
						var m = time.getMonth()+1;
						var d = time.getDate();
						var h = time.getHours();
						var mm = time.getMinutes();
						var s = time.getSeconds();
						this.wall.wall_time=y+'-'+m+'-'+d+' '
					},
					handleRemove() {
						alert("你撤回了一张图片");
					},
					handlePictureCardPreview(file) {
						this.dialogImageUrl = file.url;
						this.dialogVisible1 = true;
					},
					handleExceed(files, fileList) {
						this.$message.warning(`当前限制选择 2 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
					},
					// 上传wall的方法
					submitUpload() {
						var object = new Object();
				        object["suser"] = this.wall.suser;
				        object["guser"] = this.wall.guser;
				        object["wall_time"] = this.wall.wall_time;
				        object["wall_info"] = this.wall.wall_info;
				        
				        var jsonData = JSON.stringify(object);
				        console.log(jsonData)
				        $.ajax({
				            url: "/user/addlovewall",
				            data:jsonData,
				            contentType: "application/json;charset=UTF-8",
				            type: "post",
				            dataType: "json",				         				   
				            success: function (data) {
				               console.log("ok")
				            },error:function () {
		
				            }
				        });
					}
					
				} 
			})
		</script>
	</body>
</html>
